<template>
  <div class="mainBox">
    <pageTitle Title="账号管理"></pageTitle>
    <div class="searchBar">
      <el-input
        class="myInput"
        v-model="userno"
        placeholder="请输入账号"
        clearable
        @keyup.enter.native="handleSearch"
      />
      <el-button @click="handleSearch">搜索</el-button>
    </div>

    <div class="tableBar">
      <div class="tableBox left">
        <h4>注册信息</h4>
        <div class="table">
          <MyTable1 :tableData="registerData" :border="true" height="64rem">
            <el-table-column
              prop="userno"
              label="用户编号"
              align="center"
              width="100"
            />
            <el-table-column prop="unitName" label="学校" align="center" />
            <el-table-column
              prop="grade"
              label="学段"
              align="center"
              width="60"
            />
            <el-table-column prop="regTime" label="注册时间" align="center" />
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="120"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleDeleteReg(scope.row)"
                  >解除注册</el-button
                >
              </template>
            </el-table-column>
          </MyTable1>
        </div>
      </div>
      <div class="tableBox right">
        <h4>批次信息</h4>
        <div class="table">
          <MyTable2 :tableData="batchData" :border="true" height="64rem">
            <el-table-column prop="batchCode" label="批次编号" align="center" />
            <el-table-column prop="batchName" label="批次名称" align="center" />
            <el-table-column
              prop="studentName"
              label="学生姓名"
              align="center"
            />
            <el-table-column prop="examNo" label="考号" align="center" />
            <el-table-column
              prop="createTime"
              label="注册时间"
              align="center"
            />
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="200"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleDeleteBind(scope.row)"
                  >删除绑定信息</el-button
                >
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleDeleteAns(scope.row)"
                  >删除调查问卷</el-button
                >
              </template>
            </el-table-column>
          </MyTable2>
          <Pagination :total="batchData.length"></Pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTable1 from '@/components/common/myTable.vue';
import MyTable2 from '@/components/common/myTable.vue';
import { getUserInfo, deleteReg, deleteBind, deleteAns } from '@/Api/pc';
import { ElMessage } from 'element-plus';
import { useMessage } from '@/utils/utils';

const userno = ref('');
const lastInput = ref(''); //记录上次查询的账号
const registerData = ref([]);
const batchData = ref([]);

const handleSearch = () => {
  if (userno.value == '') {
    ElMessage({
      message: '账号不能为空',
      type: 'warning',
      offset: 10,
    });
  } else {
    getUserInfoAjax(userno.value);
  }
};

//获取用户信息ajax
const getUserInfoAjax = (value) => {
  getUserInfo({ userno: value }).then((res) => {
    lastInput.value = userno.value;
    let grade = res.obj.reg.grade.slice(0, 2);
    grade = grade == '01' ? '小学' : grade == '02' ? '初中' : '高中';
    res.obj.reg.grade = grade;
    registerData.value = [res.obj.reg];
    batchData.value = res.obj.batch;
  });
};

//解除注册
const handleDeleteReg = (row) => {
  useMessage('确定删除注册信息？', () => {
    deleteReg({ openid: row.openid }).then((res) => {
      registerData.value = [];
      batchData.value = [];
      ElMessage({
        type: 'success',
        message: '解除成功',
      });
    });
  });
};
//解除绑定
const handleDeleteBind = (row) => {
  useMessage('确定删除绑定信息？', () => {
    deleteBind({
      openid: registerData.value[0].openid,
      batchCode: row.batchCode,
      examNo: row.examNo,
    }).then((res) => {
      if (userno.value != '') {
        getUserInfoAjax(lastInput.value);
      }
      ElMessage({
        type: 'success',
        message: '解除成功',
      });
    });
  });
};
// 删除问卷回答
const handleDeleteAns = (row) => {
  useMessage('确定删除问卷信息？', () => {
    deleteAns({
      qid: row.qnid,
      studentId: row.studentId,
    }).then((res) => {
      ElMessage({
        type: 'success',
        message: '解除成功',
      });
    });
  });
};
</script>

<style lang="scss" scoped>
.tableBar {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 9rem);
  padding: 1.5rem 0.5rem;

  .tableBox {
    h4 {
      color: var(--el-text-color-regular);
      font-size: 1.6rem;
      font-weight: 600;
    }
  }

  .left {
    width: 40%;
  }
  .right {
    width: 58%;
  }
}
@import '@/assets/css/mycss.css';
</style>
